<template>
  <div>
    <!-- 这里是订单详情 -->
    <el-dialog title="退单详情" :visible.sync="modalShow" width="60%" :before-close="modalClose" center>
      <el-tabs v-model="activeName" stretch @tab-click="handleClick">
        <el-tab-pane label="开单项目" name="first">
          <el-table
            :data="tableData"
            style="width: 100%;margin-bottom: 20px;"
            row-key="id"
            border
            default-expand-all
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          >
            <el-table-column
              prop="name"
              label="名称"
              align="center"
            />
            <el-table-column
              prop="money"
              label="开单金额"
              align="center"
            />
            <el-table-column
              prop="orderNumber"
              label="开单次数"
              align="center"
            />
            <el-table-column
              prop="surplus"
              label="剩余次数"
              align="center"
            />
            <el-table-column
              label="退单次数"
              align="center"
              prop="Chargeback"
            />
          </el-table>
          <div class="footer1">
            <div>
              退单类型：
              <span>预约金</span>
            </div>
            <div>
              现金支付总额：
              <span class="order">￥ 8,000 <span>(储值金额：-￥8,000  ,  赠送金额：-￥0  , 代金券：-￥0 )</span> </span>
            </div>
            <div>
              备注：
              <el-input
                v-model="input"
                placeholder="请输入"
              />
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="审批信息" name="second" class="date">
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              :icon="activity.icon"
              :type="activity.type"
              :color="activity.color"
              :size="activity.size"
              :timestamp="activity.timestamp"
            >
              {{ activity.content }}
            </el-timeline-item>
          </el-timeline>
          <span>{{ activities[0].date }}</span>
          <span>{{ activities[1].date }}</span>
          <span>意见：{{ opinion }}</span>
        </el-tab-pane>
        <el-button @click="modalShow = false">取消</el-button>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
// import Dialog from '@/components/Dialog/index.vue';
export default {
  name: "Index",
  data() {
    return {
      modalShow: false,
      activeName: 'first',
      activities: [{
        content: '提交',
        timestamp: '提交人：张三',
        size: 'large',
        type: 'primary',
        icon: 'el-icon-success',
        date: '2020-9-20 8:00:00',
      }, {
        content: '待审批', // 未通过 失败
        timestamp: '审批人：李四',
        size: 'large',
        type: 'info',
        icon: 'el-icon-primary',
        date: '2020-9-30 8:00:00',
      }],
      tableData: [{
        id: 1,
        name: '王小虎',
        money: '9,000',
        orderNumber: '5',
        surplus: '5',
        Chargeback: 1,
      }, {
        id: 2,
        name: '王小虎',
        money: '9,000',
        orderNumber: '5',
        surplus: '5',
        children: [{
          id: 21,
          name: '王小虎1',
          money: '9,000',
          orderNumber: '5',
          surplus: '5',
          Chargeback: 1,
        }, {
          id: 22,
          name: '王小虎2',
          money: '9,000',
          orderNumber: '5',
          surplus: '6',
          Chargeback: 1,
        }],
      }],
    };
  },
  methods: {
    init() {
      this.modalShow = true;
    },
    modalClose() {
      this.modalShow = false;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};

</script>

<style scoped lang="scss">
    .el-button{
        width: 118px;
        height: 31px;
        background: #51ABAB;
        opacity: 1;
        border-radius: 4px;
        color: #fff;
        justify-content: center;
        margin-left: 43%;
        margin-top: 20px;
    }
    .dialog-footer .el-button{
        width: 80px;
        text-align: center;
    }
    .span{
        display: block;
        text-align: center;
    }
    /deep/.el-tabs__header.is-top{
        width: 34%;
        margin-left: 33%;
    }
    .el-timeline{
        margin:10px 0 25px;
        margin-left: 44%;
    }
    .date{
        position: relative;
        >span{
            position: absolute;
            left: 25%;
        }
        >:nth-child(2){
            top: 0;
        }
        >:nth-child(3){
            bottom: 40%;
        }
        >span:nth-child(4){
            color: #999;
            left: 54%;
            bottom: -5px;
        }
    }
    .el-steps {
        width: 45%;
        margin-left: 30%;
    }
    .footer{
        display: flex;
        justify-content: space-between;
        padding-top: 25px;
        line-height: 30px;
    }
    .footer,.footer1{
        .order{
            color: #FF8484;
            font-size: 16px;
            span{
                color: #333333;
                font-size: 12px;
            }
        }
        >:nth-child(2){
            display: flex;
            /deep/div{
                width: 70%;
            }
        }
    }
    .footer1{
        div{
            padding-top: 20px;
        }
    }
    /deep/.el-table__row,.el-table__indent{
        color: #51ABAB;
    }
    /deep/.el-table__row--level-1{
        color: #999;
    }
</style>
